<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>商户付款</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
    <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <title>向商户付款</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html,body{
            width:100%;
            height:100%;
            margin:0 auto;
            padding:0px;
            background-color:#EFEFF4;
        }
        .payinfo{
            display: block;
            position: absolute;
            bottom: 0;
            height: 13rem;
            width: 100%;
            overflow: hidden;
            transition: .4s;
        }
        table{
            width:100%;
            height: 91%;
            bottom: 0;
            background-color:white;
        }
        table tr{
            height: 25%;
        }
        table tr td{
            text-align:center;
            width:24.9999999%;
            border-right:1px solid #D9D9D9;
            border-bottom:1px solid #D9D9D9;
        }
        table tr td:active{
            background-color:#ECECEC;
        }
        .keybord-return,.keybord-stop{
            width:30px;
            height:30px;
            margin:0px auto;
            color:white;
        }
        .keybord-return{background-image:url(); background-size:100% 90%; }
        .keybord-stop{background-image:url(); background-size:100% 100%;}
        .pay{
            color:#ffffff;
            font-size:120%;
            background-color:#df6051;
        }
        .pay:active{
            /*background-color: #df6051;*/
            background-color: rgba(223,96,81,0.7);
        }
        .shouyin{
            text-align: center;
            color: #9b9b9b;
            font-size: 13px;
            margin-bottom: 10px;
        }
        .logo{
            background-image: url();background-size:100% 100%;
            width: 2.1875rem;
            height: 2.1875rem;
        }
        .icon{
            background-image: url();background-size:100% 100%;
            width: .9375rem;
            height: .9375rem;
        }
        .body{
            padding: 2rem 1rem;
        }
        .store-info{
            display: flex;
            align-items: center;
        }
        .name{
            margin-left: .5rem;
        }
        .main-amt{
            height: 3rem;
            padding: 1.2rem 0 0 0;
        }
        .amt-content {
            display: flex;
            background: #fff;
            padding: .5rem 1rem;
            border-radius: 4px;
            height: 2.5rem;
            font-size: 1.125rem;
        }
        .input-label {
            flex: 1;
            line-height: 2.5rem;
        }
        .input-box {
            line-height: 2.5rem;
            font-size: 1.5625rem;
            color: #777;
        }
        .gb {
            display: inline-block;
            width: 2px;
            height: 1.875rem;
            margin-top: -6px;
            background: #df6051;
            vertical-align: middle;
            animation: gb 1.3s infinite;
        }
        .money-input {
            font-weight: bold;
            color: #df6051;
        }
        @keyframes gb {
            from {
                opacity: 1;
            } to {
                  opacity: 0;
              }
        }
        .remark-info{
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #9e9e9e;
        }
        .set-remark{
            margin-left: 5px;
        }
        .main-title{
            display: flex;
            justify-content: space-between;
        }

        .shade{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.1);
            z-index: 1002;
            overflow: auto;
        }
        .dialog{
            z-index: 8888;
            height: 13rem;
            width: 100%;
            position: absolute;
            display: none;
        }
        .dialog-content{
            background: #fff;
            height: 11rem;
            border-radius: 10px;
            padding: 10px 20px;
            margin: 0 auto;
            width: 60%;
        }
        .btns{
            padding: 0 0 0 5%;
        }
        .btn-cancel{
            width: 45%;
            height: 1.8rem;
            border-radius: 20px;
            border: none;
        }
        .btn-submit{
            width: 45%;
            height: 1.8rem;
            border-radius: 20px;
            border: none;
            background-color: #df6051;
            color: #fff;
        }
        .remark-text{
            border: 1px solid #e4e0e0;
            height: 6rem;
            width: 100%;
        }
        .remark-body{
            margin-top: 15px;
        }
        .loading{
            z-index: 10000;
            position: absolute;
            width: 100%;
            display: none;
            margin: 40px 0;
        }
        .loading-body{
            width: 30%;
            text-align: center;
            margin: 0 auto;
            padding: .4rem 0;
            background-color: #fff;
            border-radius: 4px;
        }
        .loading-icon{
            background-image: url();background-size:100% 100%;
            height: 30px;
            width: 30px;
            margin: 10px auto;
        }

    </style>
</head>
<body>

</body>
<script>
    var storeId =('${storeId}');
    var openid =('${openid}');
    var merchantCode =('${merchantCode}');
    var remark =('${remark}');
    var userId =('${userId}');
    var unionId =('${unionId}');
    var userAppId =('${userAppId}');
    var payType =('${payType}');
    var comsumeMoney =('${comsumeMoney}');

    //右上角菜单
    AlipayJSBridge.call('setOptionMenu', {
        icontype: 'filter',
        redDot: '01', // -1表示不显示，0表示显示红点，1-99表示在红点上显示的数字
    });
    AlipayJSBridge.call('showOptionMenu');
    document.addEventListener('optionMenu', function (e) {
        AlipayJSBridge.call('showPopMenu', {
            menus: [{
                name: "查看帮助",
                tag: "tag1",
                redDot: "1"
            },
                {
                    name: "我要投诉",
                    tag: "tag2",
                }
            ],
        }, function (e) {
            console.log(e);
        });
    }, false);
    function pay(){
        var params = "storeId="+storeId + "&openid="+openid + "&merchantCode="+merchantCode +
            "&remark="+remark + "&userId="+userId+"&unionId="+unionId +
            "&userAppId="+userAppId +"&payWay="+payType+ "&comsumeMoney="+comsumeMoney;
        if(qrNo){
            params = params + "&snNo=" + qrNo;
        }
        if(settleType){
            params = params + "&settleType=" + settleType;
        }
        var url = "/wap/merchant/tradePay";
        var xhr = new XMLHttpRequest();//创建请求对象
        xhr.open("POST", url, true);//链接服务器
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {//请求已完成，且响应已就绪
                shape.style.display = "none";
                loading.style.display = "none";
                if (xhr.status === 200) {//请求成功
                    var resultStr = xhr.responseText//获取结果
                    var resultObj = JSON.parse(resultStr);//解析数据
                    if (resultObj.code == 200) {
                        var rdata = resultObj.data;
                        if("WXZF" == payType){
                            WeixinJSBridge.invoke('getBrandWCPayRequest', {
                                // 商品名称
                                "appId" : rdata.payAppId,
                                "timeStamp" : rdata.payTimeStamp,
                                "nonceStr" : rdata.paynonceStr,
                                "package" : rdata.payPackage,
                                "signType" : rdata.paySignType,
                                "paySign" : rdata.paySign,
                            }, function(res) {
                                if (res.err_msg == "get_brand_wcpay_request:ok" || res.err_msg == "stopMonitoringBeacons:ok") {
                                    //成功之后跳转地址
                                    window.location = '/wap/merchant/jumpUrl?orderNumber='+rdata.orderNumber;
                                } else {
                                    cancelPay(rdata.orderNumber);
                                    alert("支付失败");
                                }
                            })
                        }else if("ZFBZF" == payType){
                            var reg=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;
                            if(reg.test(rdata.source)){
                                window.location = rdata.source;
                            }else{
                                ap.tradePay({
                                    tradeNO : rdata.source
                                }, function(res) {
                                    if (res.resultCode == '9000') {
                                        //window.location = '/wap/merchant/jumpUrl?orderNumber='+rdata.orderNumber; //订单支付成功
                                    } else if (res.resultCode == '8000') {
                                    } else if (res.resultCode == '4000') {
                                        cancelPay(rdata.orderNumber);
                                        ap.alert("订单支付失败");
                                    } else if (res.resultCode == '6001' || res.resultCode == '99') {
                                        cancelPay(rdata.orderNumber);
                                    } else if (res.resultCode == '6002') {
                                        cancelPay(rdata.orderNumber);
                                        ap.alert("网络连接出错");
                                    }
                                });
                            }
                        }else{
                            window.location = rdata.redirectUrl;
                        }
                    } else {
                        alert(resultObj.message);
                    }
                }
                else {
                    alert("错误码 : " + xhr.status);
                }
            }
        }
        xhr.send(params);//发送请求
    }
    document.getElementById("pay").onclick = ()=>{
        var comsumeMoney = document.getElementById('comsumeMoney').innerText;
        if(comsumeMoney == undefined || comsumeMoney == '' || comsumeMoney == null){
            return;
        }
        var shape = document.getElementById('shade');
        var loading = document.getElementById('loading');
        shape.style.display = 'block';
        loading.style.display = 'block';
        var storeId = document.getElementById("storeId").value;
        var openid = document.getElementById("openid").value;
        var merchantCode = document.getElementById("merchantCode").value;
        var remark = document.getElementById("remark").value;
        var userId = document.getElementById("userid").value;
        var unionId = document.getElementById("unionId").value;
        var userAppId = document.getElementById("userAppId").value;
        var payType = document.getElementById("payType").value;
        var qrNo = document.getElementById("qrNo").value;
        var settleType = document.getElementById("settleType").value;

        var params = "storeId="+storeId + "&openid="+openid + "&merchantCode="+merchantCode +
            "&remark="+remark + "&userId="+userId+"&unionId="+unionId +
            "&userAppId="+userAppId +"&payWay="+payType+ "&comsumeMoney="+comsumeMoney;
        if(qrNo){
            params = params + "&snNo=" + qrNo;
        }
        if(settleType){
            params = params + "&settleType=" + settleType;
        }
        var url = "/wap/merchant/tradePay";
        var xhr = new XMLHttpRequest();//创建请求对象
        xhr.open("POST", url, true);//链接服务器
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {//请求已完成，且响应已就绪
                shape.style.display = "none";
                loading.style.display = "none";
                if (xhr.status === 200) {//请求成功
                    var resultStr = xhr.responseText//获取结果
                    var resultObj = JSON.parse(resultStr);//解析数据
                    if (resultObj.code == 200) {
                        var rdata = resultObj.data;
                        if("WXZF" == payType){
                            WeixinJSBridge.invoke('getBrandWCPayRequest', {
                                // 商品名称
                                "appId" : rdata.payAppId,
                                "timeStamp" : rdata.payTimeStamp,
                                "nonceStr" : rdata.paynonceStr,
                                "package" : rdata.payPackage,
                                "signType" : rdata.paySignType,
                                "paySign" : rdata.paySign,
                            }, function(res) {
                                if (res.err_msg == "get_brand_wcpay_request:ok" || res.err_msg == "stopMonitoringBeacons:ok") {
                                    //成功之后跳转地址
                                    window.location = '/wap/merchant/jumpUrl?orderNumber='+rdata.orderNumber;
                                } else {
                                    cancelPay(rdata.orderNumber);
                                    alert("支付失败");
                                }
                            })
                        }else if("ZFBZF" == payType){
                            var reg=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;
                            if(reg.test(rdata.source)){
                                window.location = rdata.source;
                            }else{
                                ap.tradePay({
                                    tradeNO : rdata.source
                                }, function(res) {
                                    if (res.resultCode == '9000') {
                                        window.location = '/wap/merchant/jumpUrl?orderNumber='+rdata.orderNumber; //订单支付成功
                                    } else if (res.resultCode == '8000') {
                                    } else if (res.resultCode == '4000') {
                                        cancelPay(rdata.orderNumber);
                                        ap.alert("订单支付失败");
                                    } else if (res.resultCode == '6001' || res.resultCode == '99') {
                                        cancelPay(rdata.orderNumber);
                                    } else if (res.resultCode == '6002') {
                                        cancelPay(rdata.orderNumber);
                                        ap.alert("网络连接出错");
                                    }
                                });
                            }
                        }else{
                            window.location = rdata.redirectUrl;
                        }
                    } else {
                        alert(resultObj.message);
                    }
                }
                else {
                    alert("错误码 : " + xhr.status);
                }
            }
        }
        xhr.send(params);//发送请求
    }
    function cancelPay(orderNumber) {
        var url = "/wap/merchant/cancelPay/"+orderNumber;
        var xhr = new XMLHttpRequest();//创建请求对象
        xhr.open("GET", url, true);//链接服务器
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function () {
        }
        xhr.send();//发送请求
    }
</script>
<script type="text/javascript">
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
</html>
